<template>
  <div class="typing-game-conatiner">
    <audio
      controls="true"
      autoplay="true"
      name="media"
      loop="true"
      hidden="true"
    >
      <source src="~@/assets/audio/玩玩小游戏.mp3" type="audio/mpeg" />
    </audio>
    <img
      src="~@/assets/img/typing_game/typing_game_back.png"
      @click="gostudyIndex"
      style="width:116px;height: 72px;cursor: pointer; position: fixed; left: 0; top: 0;"
      alt=""
    />
    <div class="typing-game-tab">
      <ul class="tab_box">
        <li
          v-for="(item, index) of 4"
          @click="checkActive(index)"
          class="pointer"
          :key="item"
        >
          <img
            style="height: 81px;"
            v-if="index == active"
            :src="require(`@/assets/img/typing_game/tab_active_0${item}.png`)"
            alt=""
          />
          <img
            v-else
            :src="require(`@/assets/img/typing_game/tab_0${item}.png`)"
            alt=""
          />
        </li>
      </ul>
      <ul class="typing-game-tab-content">
        <li
          class="typing-game-tab-item"
          v-for="(item, index) in tabData[active]"
          :key="index"
        >
          <div class="tab_bg">
            <span class="title">{{ item.title }}</span>
            <img
              v-if="item.isAudio"
              :src="require(`@/assets/img/typing_game/content_02_01.png`)"
              alt=""
            />
            <img
              v-else
              :src="require(`@/assets/img/typing_game/tab_02_02.png`)"
              alt=""
            />
            <div class="star_group">
              <span v-for="starItem of 3" :key="starItem">
                <span v-if="starItem > item.star" class="star star_gray"></span>
                <span v-else class="star"></span>
              </span>
            </div>
          </div>
          <span
            class="play pointer"
            @click="goGameCenter(item, item.title)"
          ></span>
          <div class="mosk" v-if="!item.openLock">
            <div class="img"></div>
          </div>
        </li>
      </ul>
      <div class="footer">
        <span class="box">
          <img
            class="mythicalCreatures"
            :src="
              require(`@/assets/img/typing_game/mythicalCreatures_0${active +
                1}.png`)
            "
            alt=""
          />
          <span class="mythicalCreatures_title">{{
            mythicalCreatures[active].title
          }}</span>
        </span>
        <div class="mosk_box">
          <img
            @click="goGameCenter(mythicalCreatures[active])"
            class="mythicalCreatures_btn pointer"
            :class="{ filter: !mythicalCreatures[active].openLock }"
            :src="
              require(`@/assets/img/typing_game/mythicalCreatures_btn_0${active +
                1}.png`)
            "
            alt=""
          />
          <div class="mosk" v-if="!mythicalCreatures[active].openLock">
            <div class="img"></div>
          </div>
        </div>
      </div>
      <div class="right" @click="wordsPractice">
        26个字母练习
      </div>
    </div>
    <!-- 视频 -->
    <div v-if="videoPlay" class="dialog">
      <div class="video">
        <div class="video-top">
          <span class="title">{{ title }}</span>
          <div class="btn_group">
            <span class="btn1" @click="next"></span>
            <span class="btn2" @click="close"></span>
          </div>
        </div>
        <!-- <div class="video_content">

        </div> -->
        <!-- <video
          v-if="false"
          autoplay
          ref="video"
          class="video_content"
          controls
          :src="videoAsset()"
        ></video> -->
        <VideoPlay
          :isGameFlag="false"
          class="video_content"
          ref="videoPlay"
          showId="spell-videoPlay"
          :vid="vid"
          width="auto"
          height="594px"
          @onVideoPlay="onVideoPlay"
          @onVideoPause="onVideoPause"
        ></VideoPlay>
      </div>
    </div>
    <!-- 26个字母练习 -->
    <div class="preselection_practice" v-if="practiceDialog">
      <div class="preselection_practice_content">
        <span
          class="preselection_practice_cancel"
          @click="practiceDialog = false"
        ></span>
        <div class="title">
          26个字母练习
        </div>
        <ul class="center">
          <li
            class="center_item"
            v-for="item in preselectionPracticeData"
            :key="item.type"
          >
            <div class="top">{{ item.title }}</div>
            <div
              class="letter_img"
              :style="{ 'background-image': 'url(' + item.imageUrl + ')' }"
            ></div>
            <div class="btn_img" @click="preselectionPractice(item.type)"></div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 学币消耗提示 -->
    <waningDialog
      :dialog="dialogFlag"
      @closeEvent="closeEvent"
      @confirmEvent="confirmEvent"
    ></waningDialog>
    <!-- 不会解锁下一关提示 -->
    <waningDialog
      :text="text"
      :dialog="videoDialogFlag"
      @closeEvent="videoCloseEvent"
      @confirmEvent="videoOnfirmEvent"
    ></waningDialog>
  </div>
</template>
<script>
import { getChallengeRecord, addChallengeRecord } from "@/api/game.js";
import waningDialog from "../commponents/waning-dialog.vue";
import VideoPlay from "@/components/VideoPlay.vue";
export default {
  components: {
    waningDialog,
    VideoPlay,
  },
  data() {
    return {
      deviceWidth:0,
      videoDialogFlag: false,
      text: "视频播放时间未到达50%，将不会解锁下一关卡",
      preselectionPracticeData: [
        {
          title: "26个字母大写练习",
          type: 21,
          imageUrl: require("@/assets/img/typing_game/letter_01.png"),
        },
        {
          title: "26个字母小写练习",
          type: 22,
          imageUrl: require("@/assets/img/typing_game/letter_02.png"),
        },
        {
          title: "26个字母大小写混合练习",
          type: 23,
          imageUrl: require("@/assets/img/typing_game/letter_03.png"),
        },
      ],
      practiceDialog: false,
      currentType: null,
      dialogFlag: false,
      title: "键盘布局和手指分工",
      videoPlay: false,
      tabData: [
        [
          {
            title: "键盘布局和手指分工",
            isAudio: true,
            star: 0,
            openLock: true,
            type: 1,
          },
          {
            title: "键盘练习F、J键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 2,
          },
          {
            title: "培养良好的打字习惯",
            isAudio: true,
            star: 0,
            openLock: false,
            type: 3,
          },
          {
            title: "键盘练习D、K键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 4,
          },
        ],
        [
          {
            title: "练习打字基本功-速度",
            isAudio: true,
            star: 0,
            openLock: false,
            type: 6,
          },
          {
            title: "键盘练习S、Y、M键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 7,
          },
          {
            title: "键盘练习E、G、U键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 8,
          },
          {
            title: "字母综合练习",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 9,
          },
        ],
        [
          {
            title: "了解shift键盘和空格键",
            isAudio: true,
            star: 0,
            openLock: false,
            type: 11,
          },
          {
            title: "键盘练习A、Z、P、C键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 12,
          },
          {
            title: "键盘练习Q、L、D、N键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 13,
          },
          {
            title: "字母综合练习",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 14,
          },
        ],
        [
          {
            title: "键盘大小写切换",
            isAudio: true,
            star: 0,
            openLock: false,
            type: 16,
          },
          {
            title: "键盘练习X、O键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 17,
          },
          {
            title: "键盘练习T、I、B键",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 18,
          },
          {
            title: "26个字母综合练习",
            isAudio: false,
            star: 0,
            openLock: false,
            type: 19,
          },
        ],
      ],
      mythicalCreatures: [
        {
          name: "青龙",
          title: "敢不敢挑战威严的东方之神?",
          openLock: false,
          type: 5,
        },
        {
          name: "白虎",
          title: "战斗吧,无畏与不屈的勇士!",
          openLock: false,
          type: 10,
        },
        {
          name: "朱雀",
          title: "尽情燃烧自己的力量吧!",
          openLock: false,
          type: 15,
        },
        {
          name: "玄武",
          title: "冲冲冲! 去追求智慧的光芒吧~",
          openLock: false,
          type: 20,
        },
      ],
      active: 0,
      playTime: 0, //播放时间
      duration: 0,
      itemData: {},
      vid: "23d31bf20523bcd4ac66712b5883aa8b_2",
    };
  },
  methods: {
    onVideoPause(playTime) {
      this.playTime = playTime;
    },
    onVideoPlay(duration) {
      this.duration = duration;
    },
    // 视频
    // videoAsset() {
    //   return require("../../../../assets/video/1.mp4");
    // },
    // 26个单词
    preselectionPractice(type) {
      this.$router.push({
        name: "preselectionPractice",
        query: {
          type,
        },
      });
    },
    wordsPractice() {
      this.practiceDialog = true;
    },
    async addChallengeRecord(data) {
      // await addChallengeRecord(data);
      addChallengeRecord(data)
        .then(() => {
          this.getChallengeRecord();
          this.clearTime();
          this.videoPlay = false;
        })
        .catch(() => {
          this.clearTime();
          this.videoPlay = false;
        });
    },
    clearTime() {
      (this.playTime = 0), //播放时间
        (this.duration = 0);
    },
    async close() {
      this.$refs["videoPlay"].pauseVideo();
      await this.$nextTick();
      setTimeout(async () => {
        if (this.itemData.pass == 1) {
          this.clearTime();
          this.videoPlay = false;
          return;
        }
        if(this.deviceWidth<1500){
          this.addChallengeRecord({
            type: this.itemData.type,
            score: 90,
            pass: 1,
          });
          return
        }
        if (this.playTime / this.duration < 0.5||!this.duration) {
          this.videoDialogFlag = true;
        } else {
          this.addChallengeRecord({
            type: this.itemData.type,
            score: 90,
            pass: 1,
          });
        }
      }, 0);
    },
    async next() {
      this.$refs["videoPlay"].pauseVideo();
      setTimeout(() => {
        if (this.itemData.pass == 1) {
          this.$router.push({
            name: "typingGameCenterPractice",
            query: {
              type: this.itemData.type + 1,
            },
          });
          return;
        } else if (this.deviceWidth<1500||(this.playTime / this.duration >= 0.5&&this.duration)) {
          this.addChallengeRecord({
            type: this.itemData.type,
            score: 90,
            pass: 1,
          });
          this.$router.push({
            name: "typingGameCenterPractice",
            query: {
              type: this.itemData.type + 1,
            },
          });
        } else {
          this.text = "视频播放时间未到达50%，暂未解锁下一关卡";
          this.videoDialogFlag = true;
        }
      }, 0);
      //   await this.$nextTick();
      //   await this.$nextTick();
      //   if (this.itemData.pass == 1) {
      //     this.$router.push({
      //       name: "typingGameCenterPractice",
      //       query: {
      //         type: this.itemData.type + 1,
      //       },
      //     });
      //     return;
      //   } else if (this.playTime / this.duration >= 0.5) {
      //     this.addChallengeRecord({
      //       type: this.itemData.type,
      //       score: 90,
      //       pass: 1,
      //     });
      //     this.$router.push({
      //       name: "typingGameCenterPractice",
      //       query: {
      //         type: this.itemData.type + 1,
      //       },
      //     });
      //   } else {
      //     this.text = "视频播放时间未到达50%，暂未解锁下一关卡";
      //     this.videoDialogFlag = true;
      //   }
    },
    async getChallengeRecord() {
      // Object.assign(this.$data, this.$options.data.call(this));
      this.tabData = this.$options.data().tabData;
      let that = this;
      let { data } = await getChallengeRecord();
      // let sortArr = Object.keys(data).sort((a, b) => {
      //   return data[a].sort - data[b].sort;
      // });
      // let sortObject = {};
      // sortArr.forEach((item) => {
      //   sortObject[item] = data[item];
      // });
      // data={...sortObject}
      Object.keys(data).forEach((item, index) => {
        if (item != index + 1) {
          delete data[item];
        }
      });
      const objectLength = Object.keys(data).length;
      if (data[objectLength].pass == 1) {
        const groupIndex = Math.floor((objectLength + 1) / 5);
        const currentIndex = (objectLength + 1) % 5;
        if (currentIndex == 0) {
          that.mythicalCreatures[groupIndex - 1].openLock = true;
        } else {
          that.tabData[groupIndex][currentIndex - 1].openLock = true;
        }
      }
      Object.keys(data).forEach((key, index) => {
        let star = 0;
        if (data[key].score >= 90) {
          star = 3;
        } else if (data[key].score >= 75) {
          star = 2;
        } else if (data[key].score >= 30) {
          star = 1;
        }
        if (key % 5 == 0) {
          that.mythicalCreatures[key / 5 - 1].openLock = true;
          that.mythicalCreatures[key / 5 - 1] = {
            ...that.mythicalCreatures[key / 5 - 1],
            ...data[key],
            star,
          };
          return;
        }
        if (key / 5 < 1) {
          that.tabData[0][(key % 5) - 1].openLock = true;
        } else if (key / 5 < 2) {
          that.tabData[1][(key % 5) - 1].openLock = true;
        } else if (key / 5 < 3) {
          that.tabData[2][(key % 5) - 1].openLock = true;
        } else if (key / 5 < 4) {
          that.tabData[3][(key % 5) - 1].openLock = true;
        }
        that.tabData[Math.floor(key / 5)][(key % 5) - 1] = {
          ...that.tabData[Math.floor(key / 5)][(key % 5) - 1],
          ...data[key],
          star,
        };
      });
    },
    checkActive(index) {
      this.active = index;
    },
    gostudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    videoCloseEvent() {
      this.videoDialogFlag = false;
    },
    videoOnfirmEvent() {
      this.clearTime();
      this.videoDialogFlag = false;
      this.videoPlay = false;
    },
    async goGameCenter(item, title) {
      const { type, num, pass } = item;
      this.itemData = { ...item };
      // const videoArr = [1, 3, 6, 11, 16];
      const videoArr = [
        
        { type: 1, url: "23d31bf20523bcd4ac66712b5883aa8b_2" },
        { type: 3, url: "23d31bf205991a6b4d8eea6af4c27138_2" },
        { type: 6, url: "23d31bf2056ad50a885a57afe3825095_2" },
        { type: 11, url: "23d31bf205abe2b9002970e8cb2bca2e_2" },
        { type: 16, url: "23d31bf205a1a5c6b8d55565ccaa95bb_2" },
      ];
      const filterVideoArr = videoArr.filter((item) => item.type == type);
      if (filterVideoArr.length > 0) {
        this.vid = filterVideoArr[0].url;
        this.title = title;
        this.videoPlay = true;
        await this.$nextTick();
        this.$refs.videoPlay.initVideo();
        // this.$refs["videoPlay"].click()
        return;
      }
      const ruleList = [5, 10, 15, 20];
      if (num >= 2 && ruleList.includes(type)) {
        this.currentType = type;
        this.dialogFlag = true;
        return;
      }
      this.$router.push({
        name: "typingGameCenterPractice",
        query: {
          type,
        },
      });
    },
    closeEvent() {
      this.dialogFlag = false;
    },
    confirmEvent() {
      this.$router.push({
        name: "typingGameCenterPractice",
        query: {
          type: this.currentType,
        },
      });
      this.dialogFlag = false;
    },
  },
  created() {
    this.deviceWidth = document.documentElement.clientWidth;
    if (this.$route.query.active) {
      this.checkActive(Number(this.$route.query.active));
    }
    this.getChallengeRecord();
  },
  beforeDestroy() {
    this.clearTime();
  },
};
</script>
<style lang="scss" scoped>
.filter {
  filter: grayscale(100%);
}
.pointer {
  cursor: pointer;
}
.typing-game-conatiner {
  background: url("~@/assets/img/typing_game/typing_game_bg.png");
  overflow: hidden;

  .typing-game-tab {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 40px auto 0;
    width: 1321px;
    height: 728px;
    background: url("~@/assets/img/typing_game/content_box.png");
    background-size: 100% 100%;

    .tab_box {
      margin: 0 auto;
      padding-top: 51px;
      padding-left: 20px;
      display: flex;
      justify-content: space-between;
      width: 764px;

      img {
        width: 188px;
        height: 71px;
      }
    }

    .typing-game-tab-content {
      transform: scale(0.96);
      margin: 43px 113px 0;
      display: flex;
      justify-content: space-between;
      text-align: center;

      .typing-game-tab-item {
        // filter: grayscale(200%);
        position: relative;
        top: 0;
        left: 0;
        width: 257px;
        height: 387px;
        background: url("~@/assets/img/typing_game/background_frame.png");
        background-size: 100% 100%;
        .mosk {
          position: absolute;
          top: 4px;
          left: 6px;
          right: 7px;
          bottom: 11px;
          border-radius: 35px;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          justify-content: center;
          padding-top: 100px;
          .img {
            width: 117px;
            height: 141px;
            background: url("~@/assets/img/typing_game/lock.png");
            background-size: 100% 100%;
          }
          // filter: grayscale(20%);
        }

        .tab_bg {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 21px auto 0;
          width: 224px;
          height: 265px;
          background: url("~@/assets/img/typing_game/tab_bg.png");
          background-size: 100% 100%;
          text-align: center;

          .title {
            display: inline-block;
            padding: 32px 0 22px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #8f5c27;
          }

          img {
            height: 122px;
            width: 113px;
          }

          .star_group {
            margin-top: 17px;
            width: 114px;
            display: flex;
            justify-content: space-between;

            .star {
              background-image: url("~@/assets/img/typing_game/star.png");
              background-size: 100% 100%;
              display: inline-block;
              width: 25px;
              height: 25px;
            }

            .star_gray {
              background-image: url("~@/assets/img/typing_game/star_gray.png");
            }
          }
        }

        .play {
          margin-top: 16px;
          display: inline-block;
          width: 59px;
          height: 59px;
          background: url("~@/assets/img/typing_game/play_yellow.png");
          background-size: 100% 100%;
        }
      }
    }

    .footer {
      transform: scale(0.96);
      width: 1080px;
      padding-left: 260px;
      padding-top: 37px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .box {
        .mythicalCreatures {
          margin-right: 28px;
          width: 86px;
          height: 86px;
        }

        .mythicalCreatures_title {
          line-height: 86px;
          font-size: 29px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .mosk_box {
        position: relative;
        top: 0;
        left: 0;
        .mosk {
          position: absolute;
          top: 2px;
          left: 2px;
          right: 1px;
          bottom: 1px;
          border-radius: 35px;
          background: rgba(0, 0, 0, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          .img {
            width: 30px;
            height: 37px;
            background: url("~@/assets/img/typing_game/lock.png");
            background-size: 100% 100%;
          }
        }
        .mythicalCreatures_btn {
          width: 211px;
          height: 69px;
        }
      }
    }
    .right {
      cursor: pointer;
      position: absolute;
      right: 51px;
      top: 276px;
      writing-mode: vertical-lr;
      text-orientation: upright;
      writing-mode: tb-lr;
      letter-spacing: 5px;
      font-size: 24px;
      color: #a972e1;
    }
  }
}
.dialog {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  .video {
    position: relative;
    top: 0;
    left: 0;
    width: 1186px;
    height: 800px;
    display: flex;
    justify-content: center;
    // align-items: center;
    background: url("~@/assets/img/typing_game/video_box.png");
    background-size: 100% 100%;
    .video-top {
      width: 100%;
      height: 105px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .title {
        line-height: 46px;
        font-size: 26px;
        color: #ffffff;
      }
      .btn_group {
        position: absolute;
        right: 0;
        right: 100px;
        .btn2 {
          cursor: pointer;
          display: inline-block;
          width: 65px;
          height: 65px;
          background: url("~@/assets/img/typing_game/video_close.png");
          background-size: 100% 100%;
          margin-left: 20px;
        }
        .btn1 {
          cursor: pointer;
          display: inline-block;
          width: 65px;
          height: 65px;
          background: url("~@/assets/img/typing_game/next_video.png");
          background-size: 100% 100%;
        }
      }
    }
    .video_content {
      height: 594px;
      width: 1057px;
      // border: 1px solid rgba(169, 114, 225, 0.2);
      position: absolute;
      left: 64px;
      top: 125px;
      // border-radius: 11px;
    }
    /deep/ .pv-video-player{
      height: 594px !important;
    }
  }
}
.preselection_practice {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  .preselection_practice_content {
    position: relative;
    left: 0;
    top: 0;
    width: 979px;
    height: 606px;
    background: url("~@/assets/img/typing_game/preselection_practice_box.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .preselection_practice_cancel {
      cursor: pointer;
      display: block;
      width: 70px;
      height: 70px;
      background: url("~@/assets/img/typing_game/preselection_practice_cancel.png");
      background-size: 100% 100%;
      position: absolute;
      right: 69px;
      top: 35px;
    }
    .title {
      text-align: center;
      font-size: 34px;
      color: #bd671f;
      padding-top: 42px;
    }
    .center {
      padding-top: 70px;
      width: 818px;
      display: flex;
      justify-content: space-between;
      .center_item {
        width: 233px;
        height: 317px;
        background: url("~@/assets/img/typing_game/preselection_practice_item.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        .top {
          padding-top: 49px;
          font-size: 18px;
          color: #8f5c27;
        }
        .letter_img {
          margin-top: 27px;
          width: 96px;
          height: 94px;
          // background: url("~@/assets/img/typing_game/letter_01.png");
          background-size: 100% 100%;
        }
        .btn_img {
          cursor: pointer;
          margin-top: 43px;
          width: 113px;
          height: 57px;
          background: url("~@/assets/img/typing_game/preselection_practice_btn.png");
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
